<template>
  <div class="management">
    <div class="operation-btn">
      <a-button style="margin-right: 8px" type="primary" size="small" @click="selectAllHandle">全选</a-button>
      <a-button type="danger" size="small" @click="callSelectAllHandle">取消全选</a-button>
    </div>
    <vxe-table
      ref="tableRef"
      height="100%"
      :loading="loading"
      :column-config="{ resizable: true }"
      :tree-config="{ transform: true, childrenField: 'children', rowField: 'id', parentField: 'pid' }"
      :data="tableData"
      :checkbox-config="{ labelField: 'id', highlight: true, checkStrictly: true }"
      @checkbox-change="selectChangeEvent"
    >
      <vxe-column type="checkbox" field="name" title="菜单名称" width="500" tree-node>
        <template #default="{ row }">
          {{ row.name }}
        </template>
      </vxe-column>
      <vxe-column field="type" title="类型">
        <template #default="{ row }">
          <a-tag v-if="row.type === 1" color="#108ee9">目录</a-tag>
          <a-tag v-else-if="row.type === 2" color="#87d068">菜单</a-tag>
          <a-tag v-else-if="row.type === 3" color="#f50">按钮</a-tag>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import { getListApi } from "@/api/configCenter/menuManagement";
import OperationHook from "./composables/operationHook";
import InitHook from "./composables/initHook";
import { nextTick, onMounted, toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    passData: Base.GeneraDataType;
    type: number;
    visible: boolean;
  }>(),
  {}
);
const { passData, visible, type } = toRefs(props);
const { tableData, loading, tableRef } = InitHook();
const { selectChangeEvent, selectAllHandle, callSelectAllHandle } = OperationHook({ passData, tableData, tableRef });
const init = () => {
  loading.value = true;
  return getListApi({ clientCode: passData.value.code, btn: true })
    .then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        if (type.value === 2) {
          tableData.value = [];
          const selectIds = passData.value.clients.map((t: any) => t.id);
          const checkedRows: Array<Base.GeneraDataType> = [];
          for (let i = 0; i < data.length; i++) {
            const target = data[i];
            if (selectIds.includes(target.id)) checkedRows.push(target);
            tableData.value.push(target);
          }
          nextTick(() => {
            tableRef.value.setAllTreeExpand(true);
            tableRef.value.setCheckboxRow(checkedRows, true);
            passData.value.clients = tableRef.value.getCheckboxRecords().map((t: any) => {
              return {
                id: t.id,
                pid: t.pid
              };
            });
          });
        } else {
          tableData.value = data;
          nextTick(() => {
            tableRef.value.setAllTreeExpand(true);
            passData.value.clients = tableRef.value.getCheckboxRecords().map((t: any) => {
              return {
                id: t.id,
                pid: t.pid
              };
            });
          });
        }
      }
    })
    .finally(() => (loading.value = false));
};
watch(
  () => passData.value.code,
  (v: string) => {
    if (v) {
      init();
    }
  }
);
watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      tableRef.value.setAllCheckboxRow(false);
    }
  }
);
onMounted(() => {
  init();
});
</script>
<style lang="stylus" scoped>
.management{
    height: calc(100vh - 400px);
    .header{
        display: flex;
        padding-bottom: 12px;
        justify-content: space-between;
        .operation-btn{
            :deep(.ant-btn){
                margin-right: 8px;
            }
        }
    }
    .content{
        .panel-header{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
    .operation-btn{
      margin-bottom: 12px;
    }
}
</style>
